<template>
  <div id="changeEmail">
    <!-- 导航条 -->
 
    <el-row>
      <el-col :span="3">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="11">
        <div class="grid-content bg-purple-light">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tubiaozhizuomoban-" />
          </svg>
          <span class="font_size">用户安全中心</span>
          <el-divider direction="vertical"></el-divider>
          <span class="font_size1">修改绑定邮箱</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
    <!-- 导航条end -->
    
    <!-- 修改表单 -->
    <div class="formContent">
    <InputEmail @changeView="changeView" v-if="view==1"></InputEmail>
    <InputNewEmail v-if="view==2"></InputNewEmail>
    </div>
    <!-- 修改表单end -->

    <!-- 底部 -->
    <div class="footer">
      <component :is="footer"></component>
    </div>
    <!-- 底部end -->
  </div>
</template>
<script>
import InputEmail from "../components/InputEmail.vue";
import InputNewEmail from "../components/InputNewEmail.vue";
import Footer from "../components/Footer.vue";
export default {
  data() {
    return {
      // 定义组件
      footer: "Footer",
      view: 1
    };
  },
  components: {
    InputNewEmail,
    InputEmail,
    Footer
  },
  methods: {
    changeView(view) {
      this.view = view;
    }
  }
};
</script>
<style lang="less">

</style>